<template>
	<view>
		<view class="picker-view">
			<view class="date-setting">
				<text class="t">筛选交易日</text>
				<view class="r">
					<uni-datetime-picker type="date" :value="single" start="2021-3-20" end="2021-6-20"
						@change="change" />
				</view>
			</view>
		</view>
		<view class="date-setting">
			<text class="t">导出报表</text>
			<view class="r">
				<text class="xiazai d-c-c" @click="exportFile">下载报表</text>
			</view>
		</view>
		<view class="wenxin_footer">
			<view class="wenxin_font">温馨提示</view>
			<text>半个小时内只能申请一次，申请成功后需要等待报告生成，约1分钟后重新点击下载报表，团队数量越大 耗时越长</text>
		</view>
	</view>
</template>

<script>
	import {
		exportStatistics,
		getExeclFileName
	} from '@/request/api/apply.js'
	export default {
		name: 'apply_team',
		data() {
			return {
				single: "2021-04-3"
			}
		},
		methods: {
			change(val) {
				console.log(val)
			},
			exportFile() {
				getExeclFileName(2).then((fileName) => {
					exportStatistics().then((res) => {
						let blob = new Blob([res], {
							type: 'application/vnd.ms-excel;charset=utf-8'
						})
						const url = window.URL.createObjectURL(blob);
						const a = document.createElement('a');
						a.download = fileName.data;
						a.href = url;
						a.click();
						window.URL.revokeObjectURL(url);
					})
				})
			}
		},
	}
</script>

<style scoped>
	.picker-view {
		padding: 10px 16px;
		background: #fff;
	}

	.date-setting {
		padding: 0 0 0 15px;
		border-bottom: .5px solid #eee;
		width: 100%;
		height: 52px;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.date-setting .t {
		font-size: 15px;
		font-weight: 400;
		color: #333;
		line-height: 23px;
	}

	.date-setting .r {
		padding-right: 15px;
		justify-content: space-between;
		display: flex;
	}

	.d-c-c {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.xiazai {
		margin: auto 5px;
		width: 80px;
		height: 30px;
		background-color: #288f1a;
		color: #fff;
		font-size: 15px;
		border-radius: 5px;
	}

	.wenxin_footer {
		margin-top: 10px;
		border-bottom: 0.5px solid rgb(238, 238, 238);
		background-color: rgb(255, 255, 255);
	}

	.wenxin_footer text {
		padding: 5px 10px 0px 15px;
	}

	.wenxin_font {
		padding: 5px 0px 5px 15px;
		font-size: 15px;
		border-bottom: 1px solid rgb(221, 221, 221);
	}

	.wenxin_footer text {
		padding: 5px 10px 0px 15px;
		color: rgb(255, 0, 0);
		font-size: 15px;
	}
</style>